<template>
  <!--角色管理页面-->
  <div>
    <a-form class="ant-advanced-search-form" :form="form" @submit="conditionSearch">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="角色名称">
            <a-input
              v-decorator="[`name`]"
              placeholder="请输入查询的角色名称"
              :allowClear="true"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="状态">
            <a-select
              v-decorator="[`state`]"
              placeholder="状态选择"
              :allowClear="true"
            >
              <a-select-option value="1">启用</a-select-option>
              <a-select-option value="0">禁用</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <!--查询按钮组-->
        <a-col :span="8" :style="{ textAlign: 'right' }">
          <a-button type="primary" html-type="submit">
            查询
          </a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="conditionReset">
            清除
          </a-button>
        </a-col>
      </a-row>
    </a-form>
    <br/>
    <div class="btnGroup">
      <a-button icon="plus-circle" @click="addRole()">
        新增
      </a-button>
    </div>
    <a-table
      size="small"
      :bordered="true"
      :columns="columns"
      :dataSource="data"
      :rowKey="`id`"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <!--状态-->
      <template slot="state" slot-scope="state">
        <template>{{ state===0 ? '禁用':'启用' }}</template>
      </template>
      <div slot="action" slot-scope="text ">
        <a href="javascript:;" @click="updateRole(text)" :disabled="text.type===0"><a-icon type="edit"/> 修改</a>
        <a-divider type="vertical" />
        <a href="javascript:;" @click="rolePermission(text)" :disabled="text.type===0"><a-icon type="key"/> 角色权限</a>
      </div>
    </a-table>
    <RoleModalModify @refresh="queryTable" ref="modify"/>
    <RoleModalPermissionBinding ref="binding" :roleId="selectRoleId"/>
  </div>
</template>

<script>
import api from './system'
import { antOrderConvert, antPaginationConvert } from '@/utils/antUtil'
import RoleModalModify from './modal/RoleModalModify'
import RoleModalPermissionBinding from './modal/RoleModalPermissionBinding'

const columns = [
  { title: '角色名称', align: 'center', sorter: true, dataIndex: 'name', key: 'name' },
  { title: '角色编码', align: 'center', sorter: true, dataIndex: 'code', key: 'code' },
  { title: '角色状态', align: 'center', sorter: true, dataIndex: 'state', key: 'state', scopedSlots: { customRender: 'state' } },
  { title: '角色备注', align: 'center', dataIndex: 'remark', key: 'remark' },
  { title: '操作', align: 'center', key: 'action', scopedSlots: { customRender: 'action' } }
]

// 角色管理页面
export default {
  name: 'RolePage',
  components: { RoleModalPermissionBinding, RoleModalModify },
  data () {
    return {
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 12 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 12 },
        sm: { span: 18 }
      },
      data: [],
      columns,
      pagination: {
        showSizeChanger: true,
        total: 0,
        showTotal: function (total, range) {
          return ` ${range[0]}-${range[1]} of ${total} 条 `
        }
      },
      sorter: {},
      roleTypeData: [],
      selectRoleId: ''
    }
  },
  created () {
    this.queryTable()
  },
  methods: {
    // 清空查询条件
    conditionReset () {
      this.form.resetFields()
    },
    // 查询按钮
    conditionSearch (e) {
      e.preventDefault()
      this.queryTable()
    },
    // 分页、排序、筛选变化时触发 的方法
    handleTableChange (pagination, filters, sorter) {
      this.sorter = sorter
      this.pagination = pagination
      this.queryTable()
    },
    //  请求后台-获取role列表
    queryTable () {
      // 查询组装数据 表单条件、分页对象、排序等
      const vs = this.form.getFieldsValue()
      const orderConvert = antOrderConvert(this.sorter, 'columnKey')
      const paginationConvert = antPaginationConvert(this.pagination)
      const params = {
        ...vs,
        ...orderConvert,
        ...paginationConvert
      }
      // 请求后台数据
      this.axios.post(api.role.getPageList, params)
        .then((response) => {
          this.data = response.data.records
          this.pagination.total = parseInt(response.data.total)
        })
        .catch((error) => {
          console.log('获取role列表请求异常了', error)
        })
    },
    // 新增
    addRole () {
      this.$refs.modify.showModal()
    },
    // 修改
    updateRole (text) {
      this.$refs.modify.showModal(text)
    },
    // 角色权限绑定
    rolePermission (text) {
      this.selectRoleId = text.id
      this.$refs.binding.showModal(text)
    }
  }
}
</script>
